<script setup>
import { useStore } from 'vuex'
import { ref, onMounted, inject, watch, getCurrentInstance } from 'vue'
import { ElMessage } from 'element-plus'
const store = useStore()
const username = ref(store.state.userStore.userInfo.data.username)
const avatarUrl = ref(store.state.userStore.userInfo.data.avatarUrl)
const groupname = ref(inject('groupName'))
const content = ref()
const contents = ref()
const count = ref(0)
const { proxy } = getCurrentInstance()
const socket = ref(proxy.$webSocketService.socket)
onMounted(() => {

})

const msg = ref({
  content,
  username,
  groupname,
  avatarUrl,
  type: 'text',
  chattype: 'Group'
})

const backmsgAndsendmsg = ref([])
const previousValues = ref([])
const previousValue = ref(null)

socket.value.addEventListener('message', (res) => {
  backmsgAndsendmsg.value.push(JSON.parse(res.data))
})

const send = () => {
  if (content.value === null) {
    ElMessage.error('输入不能为空')
  } else {
    content.value = contents.value
    socket.value.send(JSON.stringify(msg.value))
    backmsgAndsendmsg.value.push({ ...msg.value })
    contents.value = null
    console.log(backmsgAndsendmsg.value)
  }
}

watch(
  () => groupname.value,
  (newVal, oldVal) => {
    if (oldVal !== undefined) {
      previousValue.value = oldVal
      if (backmsgAndsendmsg.value.length !== 0) {
        count.value++
        // 如果监听的值不是之前出现过的某个值，则将当前值存储到 sessionStorage 中
        sessionStorage.setItem(count.value + previousValue.value, JSON.stringify(backmsgAndsendmsg.value))
        // 同时将当前值加入 previousValues 数组中
        previousValues.value.push(previousValue.value)
        backmsgAndsendmsg.value = []
        contents.value = ''
        console.log(sessionStorage)
      }
      if (previousValues.value.includes(groupname.value)) {
        // 如果监听的值是之前出现过的某个值，则从 sessionStorage 中获取以 touser 开头的键值对
        const keys = Object.keys(sessionStorage).filter(key => key.endsWith(groupname.value))
        console.log(keys)
        const length = keys.length - 1
        const values = JSON.parse(sessionStorage.getItem(keys[length]))
        console.log(values)
        for (let i = 0; i < values.length; i++) {
          backmsgAndsendmsg.value.push(values[i])
        }
      }
    }
  }
)
</script>

<template>
  <div class="chathead">{{ groupname }}</div>
  <el-main class="chatmain">
    <div class="message" v-for="(messages, index) in backmsgAndsendmsg" :key="index">
      <div v-show="messages.username !== username && messages.chattype === 'Group'" class="msgleft">
        <div class="imgleft"><img :src="'src/' + messages.avatarUrl" class="diog-friend-img" ref="img" /></div>
        <div class="usernameleft">{{ messages.username }}
          <div class="diogleft">{{ messages.content }}</div>
        </div>
      </div>
      <div v-show="messages.username === username && messages.chattype === 'Group'" class="msgright">
        <div class="usernameright">{{ username }}
          <div class="diogright">{{ messages.content }}</div>
        </div>
        <div class="imgright"><img :src="'src/' + avatarUrl" class="diog-friend-img" ref="img" /></div>
      </div>
    </div>
  </el-main>
  <el-footer class="chatfooter">
    <el-input v-model="contents" :rows="10" type="textarea" placeholder="请输入内容" @keyup.enter="send"></el-input>
    <div class="button"><button @click="send">发送</button></div>
  </el-footer>
</template>

<style scoped>
.chathead {
  height: 30px;
  text-align: left;
  border-bottom: solid 0.5px rgba(0, 0, 0, 0.197);

}

.chatmain {
  border-bottom: solid 0.5px rgba(0, 0, 0, 0.197);
  height: 400px;
}

.button {

  text-align: right;
  color: #124280;
}

.message {
  width: auto;
  height: 50px;

}

.msgleft {
  display: flex;
}

.usernameleft {
  text-align: left;
  padding-left: 2px;
  margin-top: 1px;
  display: inline;
  font-size: small;
}

.diogleft {
  padding-top: 5px;
  padding-bottom: 5px;
  border: solid black 0.5px;
  border-radius: 5px;
  text-align: left;
  background-color: rgb(129, 191, 218);
}

.msgright {
  display: flex;
  justify-content: right;
}

.diogright {
  padding-top: 5px;
  padding-bottom: 5px;
  border: solid black 0.5px;
  border-radius: 5px;
  text-align: left;
  background-color: rgb(129, 191, 218);
}

.usernameright {
  display: inline;
  text-align: right;
  padding-right: 2px;
  margin-top: 1px;
  font-size: small;
}

.imgright {
  display: inline;
}
</style>
